<script lang='ts' setup>
import { Marked } from 'marked'
import { markedHighlight } from 'marked-highlight'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
import { defineProps, toRef } from 'vue'
/** *****************************************父子组件************************/
const props = defineProps<{
    content: string
}>()
const content = toRef(props, 'content')

/** *****************************************变量************************/
/** *****************************************普通方法************************/
const marked = new Marked(
    markedHighlight({
        langPrefix: 'hljs language-',
        highlight(code, lang) {
            lang = lang === 'vue' ? 'html' : lang;
            const language = hljs.getLanguage(lang) ? lang : 'shell'
            return hljs.highlight(code, { language }).value
        },
    }),
)
/** *****************************************后台接口************************/

/** *****************************************生命周期************************/
</script>

<template>
    <div class="markdown-body" v-html="marked.parse(content)" />
</template>

<style lang="less" scoped>
::v-deep blockquote {
    display: block;
    padding: 16px;
    margin: 0 0 24px;
    border-left: 8px solid #dddfe4;
    background: #eef0f4;
    overflow: auto;
    word-break: break-word !important;
    font-size: 14px;
}
::v-deep pre {
    line-height: 1.5 !important;
}

::v-deep hr {
    margin: 20px 0;
}
.markdown-body {
    font-size: 15px !important;
    line-height: 2.3 !important;
}
</style>

